import { Flex,List,Button,InputItem} from 'antd-mobile';

class Pay extends React.Component{

    constructor(props){
        super(props);
    }

    onBridgeReady(){

    }

    componentDidMount(){
        if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', ()=>this.onBridgeReady(), false);
            }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', ()=>this.onBridgeReady());
                document.attachEvent('onWeixinJSBridgeReady', ()=>this.onBridgeReady());
            }
        }else{
            this.onBridgeReady();
        }
    }

    pay(){
        initToken();
        let params = {
            payType : "wx_h5",
            commCode : '0010',
            body : '1232123012312',
            orderType:"CAR_MONTH",
            totalFee : this.refs.input.state.value,
            code : this.props.code
        }
        postJson("/api/v2/pay/anon/weixin/H5/order",params,(data)=>{
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', data,
                (res)=>{
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                }
            );
        })
    }

    render(){
        return <div>
            <Flex>
                <List renderHeader={() => '下面输入支付金额'}>
                    <InputItem placeholder="金额" ref="input">
                        <div>标题</div>
                    </InputItem>
                </List>
            </Flex>
            <Button onClick={()=>this.pay()}>发起支付</Button>
        </div>
    }
}

ReactDOM.render(<Pay code={getUrlParam("code")}/>,document.getElementById("pay"));